import React, { useCallback, useEffect, useMemo } from 'react'
import './index.css'
import VCard from '../../../components/VCard'
import { getDriverCountByStatus, getDriverInfoList } from './service'
import { Button, Spin, message } from 'antd'
import { ExportToExcel } from '../../../utils/export'

interface DriverStatusType {
  status: string
  count: number
}
export default function DriverStatusOverview() {
  const [driverStatus, setDriverStatus] = React.useState<DriverStatusType[]>([])
  const PieOption = () => {
    return {
      title: {
        text: '驾驶员状态一览',

        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          bottom: 'bottom',
          right: 'right',
          name: 'name',
          type: 'pie',
          radius: '50%',
          data: driverStatus.map(item => {
            return {
              value: item.count,
              name: item.status
            }
          }),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
  }
  const [driverInfo, setDriverInfo] = React.useState<any[]>([])
  const [loading, setLoading] = React.useState(false)

  // private Integer driver_id;
  // private String driver_name;
  // private String status;
  // private String phone;
  // /** 身份证 */
  // private String id;
  // /** 驾驶证 */
  // private String license_id;
  const columns = [
    {
      title: '驾驶员编号',
      dataIndex: 'driver_id'
    },
    {
      title: '驾驶员姓名',
      dataIndex: 'driver_name'
    },
    {
      title: '驾驶员状态',
      dataIndex: 'status'
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      ellipsis: true
    },
    {
      title: '身份证',
      dataIndex: 'id',
      ellipsis: true
    },
    {
      title: '驾驶证',
      dataIndex: 'license_id',
      ellipsis: true
    }
  ]

  const queryList = async () => {
    setLoading(true)
    await getDriverCountByStatus().then(res => {
      setDriverStatus(res.data.data)
    })
    await getDriverInfoList().then(res => {
      setDriverInfo(res.data.data)
    })
    setLoading(false)
  }
  useEffect(() => {
    queryList()
  }, [])
  return (
    <div className="page-content-container">
      <div className="page-title-container">
        <div className="page-title">驾驶员状态一览</div>
      </div>
      <div className="page-content">
        {/* <VTable></VTable> */}
        {/* <VCard type="card"></VCard> */}
        <Spin spinning={loading}>
          <div className="VCard-list">
            <VCard type={'cards'} title={'驾驶员'} dataSource={driverStatus}></VCard>
          </div>
          {/* <div className="export-btn">
           
          </div> */}
          <div className="VCard-list">
            <VCard title={'驾驶员档案'} type={'table'} columns={columns} dataSource={driverInfo}></VCard>
            <Button
              type='primary'
              className='export-btn'
              onClick={() => {
                ExportToExcel('/api/driver/export', '驾驶员档案.xlsx')
              }}>
              导出
            </Button>
          </div>
          <div className="VCard-list">
            <VCard title={'驾驶员状态分布'} type={'pie'} dataSource={PieOption()}></VCard>
          </div>
        </Spin>
      </div>
    </div>
  )
}
